<template>
	<view>
		<u-popup class="share-popup" v-model="showPop" mode="bottom" border-radius="14" :closeable="true" @close="onClose">
			<view class="row-center md bold mt20 mb20">分享至</view>
			<view class="row-around share-tab">
				
				<!-- #ifdef MP-WEIXIN-->
				<button open-type="share" class="column-center" hover-class="none">
					<image class="share-icon" src="/static/images/icon_wechat.png"></image>
					<view class="mt10">微信好友</view>
				</button>
				
				<button open-type="share" class="column-center" hover-class="none">
					<image class="share-icon" src="/static/images/icon_wechat.png"></image>
					<view class="mt10">朋友圈</view>
				</button>
				<!-- #endif -->
	
				
			</view>
			<view class="row-center bg-body cancel xl" @tap="onClose" style="height: 95rpx;">取消</view>
		</u-popup>
		<u-popup class="share-poster" v-model="showPoster" mode="center" :custom-style="{background: 'rgba(0, 0, 0, 0)'}"
		 :safe-area-inset-bottom="true">
			<u-image class="share-img" :src="sharePoster" height="940" width="639" border-radius="12px" />
			<!-- <image class="share-img mb20" :src="sharePoster" /> -->
			<view class="row-center mt20 bg-primary" style="height: 84rpx; color: #FFFFFF; border-radius: 10px;" @tap="savePoster">
				
			</view>
		</u-popup>
		
		
		<!-- 生成海报 -->
		<share-poster v-if="enablePoster" :type="type" :share-id="shareId" :config="config"
			:qrcode="mnpQrcode" :link="getLink" @success="handleSuccess" @fail="handleFail" />
	</view>
</template>

<script>

	import {
		toLogin
	} from '@/utils/login'
    import config from '@/config/app'
	
	import { client } from '@/utils/tools';
	
	import {
		baseURL,
		// basePath
	} from '@/config/app'
	import {
		getShareMnQrcode
	} from "@/api/app"
	import poster from './poster.vue'
	
	export default {
		components: {
			'share-poster':poster
		},
		props: {
			show: {
				type: Boolean
			},
			
			shareId: {
				type: [String, Number],  // 商品id或其他活动id
				default: ''
			},
			config: {                    // 各种配置
				type: Object,
				default: () => ({})
			},
			pagePath: {                  // 跳转路径
				type: String,
				default: ''
			},
			type: {                      // 生成海报需使用 0-会员分享海报 1-商品详情 2-租赁商品
				type: [String, Number],
				default: 1
			}
		},
		data() {
			return {
				showPop: false,
				sharePoster: "",
				showPoster: false,
				showTips: false,
				
				enablePoster: false, // 海报弹窗
				mnpQrcode: '', // 海报二维吗
			};
		},
		watch: {
			show(val) {
				console.log(val)
				this.showPop = val
			},
			
			showPoster(val) {
				if (!val) {
					this.enablePoster = false
				}
			}
		},
		
		computed: {
			getLink() {
				let url = config.baseURL.replace(/\/api\//g, "/mobile/")
				// console.log(url, 'config: ',config)
				return `${url}${this.pagePath}?id=${this.shareId}&invite_code=${this.$store.getters.inviteCode}&isapp=1`
			},
		},
		
		methods: {
			onClose() {
				this.$emit('close')
			},
			async getPosterFun() {
				if (!this.isLogin) return this.$Router.push('/pages/login/login')
				uni.showLoading({
					title: '正在生成中'
				})
				// #ifdef MP-WEIXIN || MP-ALIPAY
				if (!this.mnpQrcode) {
					
					const res = await this.getMnpQrcode()
					// console.log('res.data.qr_code.qr_code', res.data.qr_code.qr_code)
					
					// #ifdef MP-WEIXIN
					this.mnpQrcode = res.data.qr_code.qr_code.replaceAll("\r\n", "")
					// #endif
	
				}
				this.enablePoster = true
				// #endif
				
	
			},
			
			// 获取商品页面二维码数据
			getMnpQrcode() {
				return new Promise((resolve, reject) => {
					getShareMnQrcode({
						id: this.shareId,  		// 商品id或其他活动id
						url: this.pagePath, 	// 跳转页面路径
						type: 1,        		// 0-会员分享海报 1-商品详情  
						goods_type: this.type,  // 类型：1-普通商品，2-租赁商品
						client,  			// 来源：1-微信小程序；6-支付宝生活号；7-支付宝小程序
					}).then((res) => {
						// console.log('shareRes', res)
						resolve(res)
					}).catch(() => {
						reject()
					})
				})
			},
			
			handleSuccess(val) {
				console.log(val)
				this.sharePoster = val
				uni.hideLoading()
				this.showPoster = true
				this.showshare = false
			},
			handleFail() {
				uni.hideLoading({
					success: () => {
						this.$toast({
							title: '生成失败'
						})
					}
				})
			},
			
			
			
			async savePoster() {
		
			},
		}
	}
</script>

<style lang="scss">
	.share-popup {
		.share-tab {
			margin: 40rpx 0 140rpx;

			.share-icon {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.cancel {
			height: 98rpx;
		}
	}

	.share-poster .share-img {
		// width: 639rpx;
		// height: 940rpx;
		// border-radius: 12rpx;
	}

	.share-tips .share-arrow {
		width: 140rpx;
		height: 250rpx;
		float: right;
		margin: 15rpx 31rpx 0 0;
	}
</style>
